<template>
  <!-- 优惠价格 -->
  <div>
    <el-table-form ref="form" :model="query">
      <el-form-item label="商品分类">
        <el-select v-model="query.gtCode" placeholder="请选择">
          <el-option :value="0" label="不限" />
          <el-option :value="1" label="普通" />
          <el-option :value="2" label="特殊" />
          <el-option :value="3" label="白金" />
          <el-option :value="4" label="钻石" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-select v-model="query.goodsCode" placeholder="请选择">
          <el-option :value="0" label="不限" />
          <el-option :value="1" label="普通" />
          <el-option :value="2" label="特殊" />
          <el-option :value="3" label="白金" />
          <el-option :value="4" label="钻石" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单来源">
        <el-select v-model="query.orderSource" placeholder="请选择">
          <el-option
            v-for="item in orderSourceMap"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户性质">
        <el-select v-model="query.customerQuality" placeholder="请选择">
          <el-option :value="0" label="不限" />
          <el-option :value="1" label="普通" />
          <el-option :value="2" label="特殊" />
          <el-option :value="3" label="白金" />
          <el-option :value="4" label="钻石" />
        </el-select>
      </el-form-item>
      <el-form-item label="组织机构" prop="orgSNNo">
        <el-tree-select
          v-model="query.orgSNNo"
          :clearable="false"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择组织机构',
            loading: $loadingPlugin.getTreeData
          }"
          :tree-params=" {
            'default-expand-all': true,
            'expand-on-click-node': false,
            'highlight-current': true,
            props:{
              value:'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>
      <el-form-item label="客户类型">
        <el-select v-model="query.customerType" placeholder="请选择">
          <el-option
            v-for="(value, key) in csmTypeMap"
            :key="key"
            :label="value.desc"
            :value="value.desc"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="有效期(起)">
        <el-date-picker
          v-model="query.startDt"
          type="date"
          placeholder="选择日期时间"
          @change="toDate()"
        />
      </el-form-item>
      <el-form-item label="有效期(止)">
        <el-date-picker
          v-model="query.endDt"
          type="date"
          placeholder="选择日期时间"
          @change="toDate()"
        />
      </el-form-item>
      <template v-slot:btns>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>

    <div style="margin-bottom: 20px;">
      <div>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openDiscountsAdd">新增</el-button>
      </div>
    </div>

    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      class="table"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data.rows"
      pagination
      :total="tableData.total"
      custom-column
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
    />
    <discounts ref="discounts" />
  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import Discounts from './components/Discounts'

  export default {
    name: 'discountPriceManage',
    components: {
      Discounts
    },
    data() {
      return {
        orderSourceMap: [
          { 'value': 1, 'desc': '呼叫中心', 'key': 'PHONE' },
          { 'value': 2, 'desc': '微信', 'key': 'WEIXIN' },
          { 'value': 3, 'desc': '代客下单', 'key': 'SUSER' },
          { 'value': 4, 'desc': '门店', 'key': 'OTHER' },
          { 'value': 5, 'desc': '底座', 'key': 'DZ' }
        ],
        csmTypeMap: [
          { 'value': 1, 'desc': '居民用户', 'key': 'Resident_user' },
          { 'value': 2, 'desc': '商业用户', 'key': 'Business_user' },
          { 'value': 4, 'desc': '工业用户', 'key': 'GY_user' },
          { 'value': 8, 'desc': '瓶批用户', 'key': 'BOTTLE_user' },
          { 'value': 16, 'desc': '槽批用户', 'key': 'GROOVE_user' }
        ],
        treeData: [],
        query: {},
        tableData: {
          total: 0,
          column: [
            {
              type: 'index',
              width: 30
            },
            {
              prop: 'gtName',
              label: '商品分类',
              width: 180
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 110,
              render: (h, { row }) => <span>{this.productName(row)}</span>
            },
            {
              prop: 'orderSource',
              label: '订单来源',
              width: 110,
              render: (h, { row }) => <span>{this.orderSourceMap.find(v => row.orderSource === v.value).desc}</span>
            },
            {
              prop: 'customerType',
              label: '客户类型',
              width: 110,
              render: (h, { row }) => <span>{this.csmTypeMap.find(v => row.customerType === v.value).desc}</span>
            },
            {
              prop: 'customerQuality',
              label: '客户性质',
              width: 110,
              render: (h, { row }) => <span>{this.csmQualityFormat(row)}</span>
            },
            {
              prop: 'orgName',
              label: '优惠有效范围',
              width: 200
            },
            {
              prop: 'price',
              label: '优惠价格',
              width: 110,
              render: (h, { row }) => <span>{this.priceFormat(row)}</span>
            },
            {
              prop: 'startDt',
              label: '有效期(起)',
              width: 200
            },
            {
              prop: 'endDt',
              label: '有效期(止)',
              width: 200
            },
            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: 210,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link size='mini' onClick={() => this.openDiscounts(row, $index)}>
                      编辑
                    </el-link>
                    <el-link size='mini' type='danger' onClick={() => this.del(row, $index)}>
                      作废
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: {
            rows: [
              {
                'corpSN': 6,
                'customerQuality': 0,
                'customerType': 1,
                'endDt': '2021-10-28T10:36:39',
                'goodsCode': 'S0086',
                'gtCode': 'T0002',
                'gtId': 0,
                'gtName': '液化气',
                'gtSNNo': '0001000000000000',
                'orderSource': 1,
                'orgId': 20785,
                'orgName': '上海松江测试站点',
                'orgSNNo': '001014000000000000000',
                'price': 7,
                'priceId': 157,
                'specStatus': 2,
                'startDt': '2021-08-03T10:36:36'
              },
              {
                'corpSN': 6,
                'customerQuality': 0,
                'customerType': 1,
                'endDt': '2022-04-01T10:10:34',
                'goodsCode': 'S0088',
                'goodsName': '15kg国产气',
                'gtCode': 'T0002',
                'gtId': 0,
                'gtName': '液化气',
                'gtSNNo': '0001000000000000',
                'orderSource': 1,
                'orgId': 20221,
                'orgName': '上海全流程测试',
                'orgSNNo': '001000000000000000000',
                'price': 0.99,
                'priceId': 156,
                'specStatus': 2,
                'startDt': '2021-04-02T00:10:22'
              },
              {
                'corpSN': 6,
                'customerQuality': 1,
                'customerType': 2,
                'endDt': '2019-10-31T14:38:59',
                'goodsCode': 'S0037',
                'gtCode': 'T0002',
                'gtId': 0,
                'gtName': '液化气',
                'gtSNNo': '0001000000000000',
                'orderSource': 4,
                'orgId': 20788,
                'orgName': '上海嘉定测试站点',
                'orgSNNo': '001017000000000000000',
                'price': 5.8,
                'priceId': 153,
                'specStatus': 2,
                'startDt': '2019-10-31T14:38:57'
              }
            ]
          }
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      // 时间冲突
      toDate() {
        const startDt = this.query.startDt
        const endDt = this.query.endDt
        if (endDt < startDt) {
          this.$confirm('起始日期不能大于结束日期', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success'
              // message: '删除成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info'
              // message: '已取消删除'
            })
          })
        }
      },
      // 订单来源
      orderSourceFormat(val) {
        return this.orderSourceMap[val]
      },
      // 客户类型
      csmTypeFormat(val) {
        return this.csmTypeMap[val] || '不限'
      },
      // 客户性质
      csmQualityFormat(val) {
        let msg = '不限'
        if (val.customerQuality === 1)msg = '普通'
        else if (val.customerQuality === 2)msg = '特殊'
        else if (val.customerQuality === 3)msg = '白金'
        else if (val.customerQuality === 4)msg = '钻石'
        return msg
      },
      // 优惠价格
      priceFormat(val) {
        return `${val.price}元`
      },
      // 商品名称
      productName(val) {
        let msg = val.goodsName
        if (val.goodsName === null)msg = '不限'
        else if (val.goodsName === '')msg = '不限'
        else if (val.goodsName === undefined)msg = '不限'
        return msg
      },
      // 获取所属机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.orgSNNo = value.orgSNNo
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      // 修改
      openDiscounts(row) {
        this.$refs.discounts.open(row)
      },
      // 新增
      openDiscountsAdd() {
        this.$refs.discounts.open()
      },
      // 作废
      del() {
        this.$confirm('确认要作废吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    }
  }
</script>

<style lang='scss' scoped>

</style>
